<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息管理</title>
    <!--使用elementui 必须引入vue-->
    <script type="text/javascript" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
    <!-- ele引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- ele引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--axios-->
    <script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <span>商品类目信息</span><br>
        <!--    <el-row>-->
        <!--        <el-col :span="6"><span>类目名： </span>-->
        <!--            <el-input v-model="inputName" style=" width :200px" placeholder="请输入商品名称"></el-input>-->
        <!--        </el-col>-->
        <!--        <el-col :span="6"><span>类目编号： </span>-->
        <!--            <el-input v-model="inputCode" style=" width :200px" placeholder="请输入商品编号"></el-input>-->
        <!--        </el-col>-->
        <!--        <el-col :span="6">-->
        <!--            <el-button type="primary" @click="clickQuery">查询</el-button>-->
        <!--            <br></el-input></el-col>-->
        <!--    </el-row>-->
        <el-button type="primary" @click="dialogFormVisible = true ; openInsert()">新增</el-button>-->
        <template>
            <el-table
                    :data="userData"
                    empty-text="正在努力加载中..."
                    height="490"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="name"
                        label="用户名称"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="password"
                        label="用户密码">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="联系电话">
                </el-table-column>
                <el-table-column
                        prop="role"
                        label="角色权限">
                </el-table-column>
                <el-table-column
                        width="150"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="dialogFormVisible = true ; editUser(scope.$index)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="deleteById(scope.$index, scope.row)">注销
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: center">
                <el-pagination
                        :current-page.sync="pageNum"
                        background
                        layout="prev, pager, next"
                        @current-change="onCurrent"
                        :total="total">
                </el-pagination>

                <el-dialog title="编辑用户信息" :visible.sync="dialogFormVisible">
                    <el-form :model="userform" :rules="rules" ref="userform">
                        <el-form-item label="用户名称" :label-width="formLabelWidth" prop="name">
                            <el-input v-model="userform.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <!--prop 匹配 表单rows字段-->
                        <el-form-item label="用户密码" :label-width="formLabelWidth" prop="password">
                            <el-input v-model="userform.password" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="用户权限" :label-width="formLabelWidth" prop="role">
                            <el-input v-model="userform.role" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="用户电话" :label-width="formLabelWidth" prop="phone">
                            <el-input v-model="userform.phone" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submitForm('userform')">确 定
                        </el-button>
                    </div>
                </el-dialog>
            </div>
        </template>
    </div>
<script>
    var v = new Vue({
        el:"#app",
        data:{
            userData:[],
            pageNum: 1,
            total:0,
            userform: {
                uId:0,
                name: '',
                password: '',
                role:'',
                phone:''
            },
            currentIndex:0,
            dialogFormVisible: false,
            //校验规则
            rules: {
                //blur -- 失焦
                name: [
                    {required: true, message: '请输入用户名称', trigger: 'blur'},
                    {min: 2, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入用户密码', trigger: 'blur'},
                    {min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur'}],
                role: [
                    {required: true, message: '请输入用户角色', trigger: 'blur'},
                    {min: 2, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur'}
                ]
            },
            formLabelWidth: '100px',
        },
        mounted(){
            axios.post
            ("http://127.0.0.1:8001/user/allUserInfo", {
                // params
                pageNum: this.pageNum,
                // pageSize:10
            }).then((res) => {
                this.userData = res.data.list;
                this.total = res.data.total;
                this.pageNum = res.data.pageNum;
                console.info(this.userData);
                // console.info(res.data);
                // console.info("总数："+res.data.total)

            });
        },
        methods:{
            onCurrent(pageNum) {
                axios.post
                ("http://127.0.0.1:8001/user/allUserInfo", {
                    // params
                    pageNum: this.pageNum,
                    // pageSize:10
                }).then((res) => {
                    this.userData = res.data.list;
                    this.total = res.data.total;
                    this.pageNum = res.data.pageNum;
                    // console.info(res.data);
                    // console.info("总数："+res.data.total)
                });
            },
            deleteById(index) {
                this.$confirm('此操作将永久注销该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true

                }).then(() => {
                    var uid = this.userData[index].id;
                    axios.post
                    ("http://127.0.0.1:8001/user/deleteUser", {
                        // params
                        // pageNum:this.pageNum,
                        id: uid,
                    }).then(res => {
                        console.info(res.data);
                    })
                    //js的splice方法，删除index下标的1个项目数 ==》 可以做到删除后动态渲染效果 其实该行已经 不存在
                    this.userData.splice(index, 1);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            editUser(index){
                this.currentIndex = index;
                this.userform.name = this.userData[index].name;
                this.userform.password = this.userData[index].password;
                this.userform.role = this.userData[index].role;
                this.userform.uId = this.userData[index].id;
                this.userform.phone = this.userData[index].phone;
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //当为新增的场景下
                        if(this.userform.uId==0){
                            axios.post
                            ("http://127.0.0.1:8001/user/saveUserModify", {
                                // params
                                id : this.userform.uId,
                                name: this.userform.name,
                                password : this.userform.password,
                                role : this.userform.role,
                                phone : this.userform.phone
                            }).then((res) => {
                                this.$message(res.data);

                            });
                            this.onCurrent();
                        }else{
                            axios.post
                            ("http://127.0.0.1:8001/user/saveUserModify", {
                                // params
                                id : this.userform.uId,
                                name: this.userform.name,
                                password : this.userform.password,
                                role : this.userform.role,
                                phone : this.userform.phone
                            }).then((res) => {
                                this.$message(res.data);
                                console.info(res.data);
                                this.userData.splice(this.currentIndex, 3, {
                                    id : this.userform.uId,
                                    name: this.userform.name,
                                    password : this.userform.password,
                                    role : this.userform.role,
                                    phone : this.userform.phone
                                });
                            });
                        }

                        this.dialogFormVisible = false ;
                    } else {
                        this.$message({
                            showClose: true,
                            message: '输入有误',
                            type: 'error'
                        });
                        return false;
                    }
                });
            },
        }
    })
</script>
</body>
</html>